<template>
    <van-list :finished="true">
		<div class="bank_box" v-for="(v,k) in list" :key="k" @click="onChange(v)">
			<div class="item" :class="bank_bg(v.name)">
				<div class="bank_info">
					<div class="bank_name">{{v.name}}</div>
					<div class="bank_type">储蓄卡</div>
					<div class="bank_number">{{v.card}}</div>
				</div>
			</div>
		</div>
        <!-- <router-link class="btn" to="/bank">去添加</router-link> -->
    </van-list>
</template>
<script>

    import Vue from 'vue';
    import {List} from 'vant';
    import Fetch from '../../utils/fetch'

    Vue.use(List);
    export default {
        props: {
            onChange: {
                type: Function,
                required: true
            }
        },
        data() {
            return {
                list: [],
            }
        },
        mounted() {

            Fetch('/user/bank/search').then(r => {
                this.list = r.data.list;
            });
        },
		methods:{
			bank_bg(type){
				if(type.indexOf('工商')!=-1){
					return 'gongshang';
				}else if(type.indexOf('北京')!=-1){
					return 'beijing';
				}else if(type.indexOf('光')!=-1){
					return 'guangda';
				}else if(type.indexOf('广')!=-1){
					return 'guangfa';
				}else if(type.indexOf('华夏')!=-1){
					return 'huaxia';
				}else if(type.indexOf('建设')!=-1){
					return 'jianshe';
				}else if(type.indexOf('交通')!=-1){
					return 'jiaotong';
				}else if(type.indexOf('出口')!=-1){
					return 'jinkou';
				}else if(type.indexOf('民生')!=-1){
					return 'minsheng';
				}else if(type.indexOf('农业')!=-1){
					return 'nongye';
				}else if(type.indexOf('浦')!=-1){
					return 'pufa';
				}else if(type.indexOf('兴业')!=-1){
					return 'xingye';
				}else if(type.indexOf('邮')!=-1){
					return 'youzheng';
				}else if(type.indexOf('招')!=-1){
					return 'zhaoshang';
				}else if(type.indexOf('中国银行')!=-1){
					return 'zhongguo';
				}else if(type.indexOf('中信')!=-1){
					return 'zhongxin';
				}else{
					return 'basic_bank'
				}
			},
		}
    }
</script>
<style lang="less" scoped>
	.van-list{
		max-width: 340px;
		margin: 10px auto;
		padding: 0 10px;
	}
    .btn {
        display: block;
        width: 3rem;
        margin: 20px auto;
        font-size: 14px;
        color: #fff;
        background: #7ac72b;
        height: 30px;
        line-height: 30px;
        border-radius: 5px;
        outline: none;
        border: none;
        text-align: center;
    }
	.bank_number{
		margin-top: 7px;
		font-size: 26px;
		line-height: 41px;
		color: #FFFFFF;
		padding-left: 48px;
		word-break: keep-all;
		white-space: nowrap;
	}
	.bank_type{
		font-size: 13px;
		line-height: 18px;
		padding-left: 48px;
		opacity: 0.8;
		color: #FFFFFF;
	}
	.bank_name {
	    font-size: 16px;
		line-height: 22px;
		margin-top: 12px;
		padding-left: 48px;
		color: #FFFFFF;
	}
	
	@media screen and (max-width:380px){
		.bank_number{
			font-size:22px;
		}
	}
    .item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        position: relative;
    	margin: 0 auto 10px auto;
    	z-index: 2;
    	height: 112px;
    	border-radius: 6px;
    }
    
    .item .logo {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 36px;
        flex: 0 0 36px;
        height: 36px;
        background: #fff;
        border-radius: 100%;
        margin-right: 24px;
        border: 2px solid #fff;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
    }
    
    
    .item .bank_info {
    	max-width: 340px;
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    }
    
    .item .bank_info .bank_name {
        font-size: 16px;
    	line-height: 22px;
    	margin-top: 12px;
    	padding-left: 48px;
    	color: #FFFFFF;
    }
	.beijing{
		background: url(images/beijing_bank.png) no-repeat center center;
		background-size: 102% 100%;
	}
	.gongshang{
		background: url(images/gongshang.png) no-repeat center center;
		background-size: 102% 100%;
	}
	.guangda{
		background: url(images/guangda.png) no-repeat center center;
		background-size: 102% 100%;
	}
	.guangfa{
		background: url(images/guangfa.png) no-repeat center center;
		background-size: 102% 100%;
	}
	.huaxia{
		background: url(images/huaxia.png) no-repeat center center;
		background-size: 102% 100%;
	}
	.jianshe{
		background: url(images/jianshe.png) no-repeat center center;
		background-size: 102% 100%;
	}
	.jiaotong{
		background: url(images/jiaotong.png) no-repeat center center;
		background-size: 102% 100%;
	}
	.jinkou{
		background: url(images/jinkou.png) no-repeat center center;
		background-size: 102% 100%;
	}
	.minsheng{
		background: url(images/minsheng.png) no-repeat center center;
		background-size: 102% 100%;
	}
	.nongye{
		background: url(images/nongye.png) no-repeat center center;
		background-size: 102% 100%;
	}
	.pufa{
		background: url(images/pufa.png) no-repeat center center;
		background-size: 102% 100%;
	}
	.xingye{
		background: url(images/xingye.png) no-repeat center center;
		background-size: 102% 100%;
	}
	.youzheng{
		background: url(images/youzheng.png) no-repeat center center;
		background-size: 102% 100%;
	}
	.zhaoshang{
		background: url(images/zhaoshang.png) no-repeat center center;
		background-size: 102% 100%;
	}
	.zhongguo{
		background: url(images/zhongguo.png) no-repeat center center;
		background-size: 102% 100%;
	}
	.zhongxin{
		background: url(images/zhongxin.png) no-repeat center center;
		background-size: 102% 100%;
	}
	.basic_bank{
		background: url(images/basic_bank.png) no-repeat center center;
		background-size: 102% 100%;
	}
</style>
